tailwindでCSS Module内でMulti SelectorなUtility Classを@applyすると壊れる

code:css

.hoge {

@apply group-hover:text-white;

}

とかすると

code:css

.group:hover .hoge {

color: ...

}

本当は

code:css

:global(.group:hover) .hoge { ... }

みたいになっていてほしい

何らかのモードが必要になりそう?

結論

回避

code:css

:global {

:local(.hoge) {

@apply group-hover:text-white;

}

}

と書く

展開されて

code:compiled.css

:global {

.group:hover :local(.hoge) {

@apply text-white;

}

}

になるため

わかるかよ

↓のアプローチは全て失敗です。悲しいね

実装

最悪configを拡張することになるだろうが、可能なら知らないうちにうまくやってくれてほしいという気持ちはある

自動はとりあえず考えない